<template>
  <div class="devlopment" >
    <el-breadcrumb separator="/" class="page-title">
      <el-breadcrumb-item :to="{ path: '@/devlopmentList' }">{{$t('m.DeveloperAdvertisement')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('m.NewAdvertisement')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm container-padding">
      <h3>{{$t('m.NewAdvertisement')}}</h3>
      <div class="container-box label-style">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item :label="$t('m.Region')" prop="regionId">
            <el-select v-model="ruleForm.regionId" placeholder="" @change="getTownships($event)">
              <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('m.Township')" prop="townshipId">
            <el-select v-model="ruleForm.townshipId" placeholder="" >
              <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('m.Street')" prop="street">
            <el-input v-model="ruleForm.street"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('m.PropertyType')" prop="propertyTypeId">
            <el-select v-model="ruleForm.propertyTypeId" @change="getSubType($event)" placeholder="" >
              <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('m.Propertysubtype')" prop="propertySubTypeId">
            <el-select v-model="ruleForm.propertySubTypeId" placeholder="" >
              <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item :label="$t('m.DevelopmentName')">
            <el-input v-model="ruleForm.developmentName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('m.CompletionDate')" prop="completionDate">
                <el-date-picker
                v-model="ruleForm.completionDate"
                type="month"
                value-format="yyyy-MM"
                >
              </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('m.ConstructionStatus')" prop="constructionStatus">
            <el-select v-model="ruleForm.constructionStatus" placeholder="" >
              <el-option v-for="rg in constructionStatus" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.Detail')" prop="constructionStatusOtherDesc">
            <el-input v-model="ruleForm.constructionStatusOtherDesc" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      </div>
      <h3>{{$t('m.map')}}</h3>
      <div class="container-box">
        <googleMap ref="googleMap"></googleMap>
      </div>
      <h3>{{$t('m.Photos')}}</h3>
      <div class="container-box" style="margin: 30px 0 10px 0;">
        <!--CoverPhoto 隐藏-->
        <!--<uploadimages ref="uploadPhotos1" :coverPhoto.sync="coverPhoto"></uploadimages>-->
        <uploadmoreimages ref="uploadPhotos"></uploadmoreimages>
        <!--<uploadImagesFloor ref="uploadFloorPhotos" :floorPlanPhotoList="floorPlanPhotoList"></uploadImagesFloor>-->
      </div>
      <h3>{{$t('m.UnitsandPrice')}}</h3>
      <div class="container-box">
        <el-row class="currency" :gutter="15">
        <el-col :span="6">
          <span>{{$t('m.Currency')}}</span>
          <el-form-item  prop="currencyId">
          <el-select v-model="ruleForm.currencyId" placeholder="">
            <el-option v-for="c in currency" :key="c.value" :label="c.text" :value="c.value"></el-option>
          </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addNewFloor" style="margin-top:16px;">{{$t('m.AddNew')}}</el-button>
        </el-col>
        </el-row>
        <unitsAndPrice ref="unitsandprice" :developmentsUnitsList="developmentsUnitsList" style="min-width: 1000px"></unitsAndPrice>
      </div>
      <div class="price-option container-box">
        <span>{{$t('m.PriceOption')}}</span>
        <el-row :gutter="20" style="margin-top:20px;">
          <el-col :span="1"><p>1</p></el-col>
          <el-col :span="6">
            <el-form-item prop="priceOptionDescription1">
              <el-input v-model="ruleForm.priceOptionDescription1" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <el-col :span="1"><p>2</p></el-col>
          <el-col :span="6">
            <el-form-item prop="priceOptionDescription2">
              <el-input v-model="ruleForm.priceOptionDescription2" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <el-col :span="1"><p>3</p></el-col>
          <el-col :span="6">
            <el-form-item prop="priceOptionDescription3">
              <el-input v-model="ruleForm.priceOptionDescription3" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <h3>{{$t('m.PaymentTerms')}}</h3>
      <div class="container-box">
        <div class="dev-box">
          <el-row :gutter="20">
            <el-col :span="4">
          <el-form-item label="" prop="isInstallment">
              <el-checkbox v-model="ruleForm.isInstallment" :label="$t('m.Installment')"></el-checkbox>
          </el-form-item>
            </el-col>
            <el-col :span="4">
          <el-form-item label=""  prop="isBankLoan">
              <el-checkbox v-model="ruleForm.isBankLoan" :label="$t('m.BankLoan')"></el-checkbox>
          </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="paymentTermsDescription">
                <el-input type="textarea" v-model="ruleForm.paymentTermsDescription"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <h3>{{$t('m.AgentCommission')}}</h3>
      <div class="container-box">
      <div class="dev-box">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="" prop="isGetHelp">
              <el-checkbox v-model="ruleForm.isGetHelp" :label="$t('m.GetHelpfromagentstosellfaster')"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item :label="$t('m.CashdownAgentCommission')" prop="cashDownCommission">
              <el-col :span="2">
                <el-input type="number" v-model="ruleForm.cashDownCommission"  placeholder=""></el-input>
              </el-col>
                <p style="margin:0;">%</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item :label="$t('m.BankProcessAgentCommissino')" prop="bankProcessCommission">
              <el-col :span="2">
                <el-input type="number" v-model="ruleForm.bankProcessCommission"  placeholder=""></el-input>
              </el-col>
              <p style="margin:0;">%</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item :label="$t('m.HirepurchaseAgentCommission')" prop="hirePurchasCommission">
              <el-col :span="2">
                <el-input type="number" v-model="ruleForm.hirePurchasCommission"  placeholder=""></el-input>
              </el-col>
              <p style="margin:0;">%</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('m.Details')" prop="commissionDescription">
              <el-input type="text" v-model="ruleForm.commissionDescription" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      </div>
      <h3>{{$t('m.IndoorFeatures')}}</h3>
      <div class="container-box">
        <el-form-item label="" class="label-vertical features-check" prop="indoorFeatureList">
        <el-checkbox-group
          v-model="ruleForm.indoorFeatureList">
          <el-checkbox v-for="indoor in indoors" :label="indoor.value" :key="indoor.value">{{indoor.text}}</el-checkbox>
        </el-checkbox-group>
        </el-form-item>
      </div>
      <h3>{{$t('m.OutdoorFeatures')}}</h3>
      <div class="container-box">
        <el-form-item label="" class="label-vertical features-check" prop="outdoorFeatureList">
          <el-checkbox-group
            v-model="ruleForm.outdoorFeatureList">
            <el-checkbox v-for="outdoor in outdoors" :label="outdoor.value" :key="outdoor.value">{{outdoor.text}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <h3>{{$t('m.Description')}}</h3>
      <div class="container-box">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item :label="$t('m.Description')" prop="description">
              <el-input
                type="textarea"
                :rows="8"
                :maxlength="4000"
                placeholder=""
                @input="descriptionConter()"
                v-model="ruleForm.description">
              </el-input>
              <div class="description-conter">{{remnant}}/4000</div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="container-box">
        <el-row :gutter="40"  type="flex" justify="center" style="padding:40px 0;">
          <el-col :span="6">
            <el-button @click.native = "submitDevForm(4,'ruleForm')" v-loading.fullscreen.lock="fullscreenLoading" size="medium" style="width:100%">{{$t('m.SaveasDraft')}}</el-button>
          </el-col>
          <el-col :span="6">
            <el-button @click.native = "submitDevForm(1,'ruleForm')" v-loading.fullscreen.lock="fullscreenLoading" size="medium"  type="warning" style="width:100%">{{$t('m.Publish')}}</el-button>
          </el-col>
          <!--<el-col :span="6">
            <el-button @click.native = "removeDevForm('ruleForm')" size="medium"  style="width:100%">remove</el-button>
          </el-col>-->
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>

// 英语josn
import regions from '@/json/region'
import townships from '@/json/township'
import propertyType from '@/json/propertyType'
import currencyData from '@/json/CurrencyData'
import propertySubType from '@/json/propertySubType'
import floors from '@/json/floor'

// 缅甸语json
import mm_regions from '@/mmJson/region'
import mm_townships from '@/mmJson/township'
import mm_propertyType from '@/mmJson/propertyType'
import mm_currencyData from '@/mmJson/CurrencyData'
import mm_propertySubType from '@/mmJson/propertySubType'
import mm_floors from '@/mmJson/floor'


// import statusData from '@/json/StatusData'
import googleMap from '@/components/maincomponents/googlemap'
// import uploadimages from '@/components/maincomponents/uploadimages'
// import uploadImagesFloor from '@/components/maincomponents/uploadimagesfloor'
import uploadmoreimages from '@/components/maincomponents/uploadmoreimages'
import unitsAndPrice from '@/components/maincomponents/unitsandprice'
import {uploadFloorImgAjax, uploadDevelopmentInfo, uploadDevelopmentPhotos, uploadDevelopmentFloorPhotos, initDevelopment, updateDevelopmentInfo} from '@/api/api'
import Qs from 'qs'
import GoogleMapsLoader from 'google-maps'
export default {
  name: 'Newdev',
  data () {
    return {
      // 初始化时表单数据
      // regions: regions,
      townships: [],
      // 隐蔽land
      // propertyType: propertyType,
      // propertyType: [
      //   {"value":	1	,"text":"Apartment","selected":true},
      //   {"value":	2	,"text":"Condo"},
      //   {"value":	3	,"text":"House"},
      //   {"value":	8	,"text":"Commercial"}
      // ],
      propertySubType: [],
      // constructionStatus: [
      //   {'value': 1, 'text': 'Not yet started'},
      //   {'value': 2, 'text': 'Building'},
      //   {'value': 3, 'text': 'Finished'}
      // ],
      // indoors: [
      //   {'value': 1, 'text': 'Air Conditioning'},
      //   {'value': 2, 'text': 'Bathtub'},
      //   {'value': 3, 'text': 'Water Heater'},
      //   {'value': 4, 'text': 'Washing Machine'},
      //   {'value': 5, 'text': 'Refrigerator'},
      //   {'value': 6, 'text': 'Renovated'},
      //   {'value': 7, 'text': 'Phone line'},
      //   {'value': 8, 'text': 'Intercom'},
      //   {'value': 9, 'text': 'Teak Parquet'},
      //   {'value': 10, 'text': 'Tile Kitchen'},
      //   {'value': 11, 'text': 'Hall Type'},
      //   {'value': 12, 'text': 'CCTV'},
      //   {'value': 13, 'text': 'Security access control system'},
      //   {'value': 14, 'text': 'Own Meter'},
      //   {'value': 15, 'text': 'Own motor'},
      //   {'value': 16, 'text': 'Underground Tank'},
      //   {'value': 17, 'text': 'Overhead Tank'},
      //   {'value': 18, 'text': 'Generator'},
      //   {'value': 19, 'text': 'Pile Foundation'},
      //   {'value': 20, 'text': '24 Hour Security Staff'},
      //   {'value': 21, 'text': 'Transformer'}
      // ],
      // currency: currencyData,
      // outdoors: [
      //   {'value': 1, 'text': 'Car Park'},
      //   {'value': 2, 'text': 'Pool'},
      //   {'value': 3, 'text': 'Gym'},
      //   {'value': 4, 'text': 'Sauna'},
      //   {'value': 5, 'text': 'BBQ Area'},
      //   {'value': 6, 'text': 'Playground'},
      //   {'value': 7, 'text': 'Lift'}
      // ],
      remnant: 0,
      fullscreenLoading: false,
      // 修改开发商信息时获取的字段
      // developmentPhotoList: [],
      coverPhoto: '',
      floorPlanPhotoList: [],
      developmentsUnitsList: [],
      // 表单字段
      ruleForm: {
        // 表单数据必填字段
        regionId: null,
        townshipId: null,
        street: '',
        propertyTypeId: null,
        propertySubTypeId: null,
        developmentName: '',
        constructionStatus: '',
        // 表单数据非必填字段
        completionDate: null,
        constructionStatusOtherDesc: null,
        priceOptionDescription1: null,
        priceOptionDescription2: null,
        priceOptionDescription3: null,
        isInstallment: false,
        isBankLoan: false,
        paymentTermsDescription: null,
        isGetHelp: false,
        cashDownCommission: null,
        bankProcessCommission: null,
        hirePurchasCommission: null,
        commissionDescription: null,
        developmentsUnitsReqList: null,
        indoorFeatureList: [],
        outdoorFeatureList: [],
        description: null,
        currencyId: 1,
        construction: [],
        coverPhoto:''
      },
      // 添加表单修改数据和字段
      id: '',
      // 表单必填字段验证规则
      rules: {
        regionId: [
            { required: true, type: 'number', message: 'please select region', trigger: 'change' }
        ],
        townshipId: [
            { required: true, type: 'number', message: 'please select Township', trigger: 'change' }
        ],
        street: [
            { required: true, message: 'please inter Street', trigger: 'blur' }
        ],
        propertyTypeId: [
            { required: true, type: 'number', message: 'please select Property type', trigger: 'change' }
        ],
        propertySubTypeId: [
            { required: true, type: 'number', message: 'please select Property sub type', trigger: 'change' }
        ],
        /* developmentName: [
            { required: true, message: 'please inter development name', trigger: 'blur' }
        ], */
        // constructionStatus: [
        //     { required: true, type: 'number', message: 'please select Construction Status', trigger: 'change' }
        // ]
      }
    }
  },
  computed: {
    regions(){
      if(this.$store.state.localLang == 'MM'){
        return mm_regions
      }else {
        return regions
      }
    },
    // 隐蔽land
    propertyType(){
      if(this.$store.state.localLang == 'MM'){
        return [
          {"value":	1	,"text":"တိုက္ခန္း","selected":true},
          {"value":	2	,"text":"ကြန္ဒို"},
          {"value":	3	,"text":"အိမ္"},
          {"value":	8	,"text":"စီးပြားေရးႏွင့္ဆိုင္ေသာ"}
        ]
      }else{
        return [
          {"value":	1	,"text":"Apartment","selected":true},
          {"value":	2	,"text":"Condo"},
          {"value":	3	,"text":"House"},
          {"value":	8	,"text":"Commercial"}
        ]
      }
    },
    constructionStatus(){
      if(this.$store.state.localLang == 'MM'){
        return  [
          {'value': 1, 'text': 'တည္ေဆာက္ျခင္းမရွိေသး'},
          {'value': 2, 'text': 'ေဆာက္လုပ္ဆဲ'},
          {'value': 3, 'text': 'ေဆာက္လုပ္ျပီးစီး'}
        ]
      }else {
        return  [
          {'value': 1, 'text': 'Not yet started'},
          {'value': 2, 'text': 'Building'},
          {'value': 3, 'text': 'Finished'}
        ]
      }
    },
    currency(){
      if(this.$store.state.localLang == 'MM'){
        return mm_currencyData
      }else {
        return currencyData
      }
    },
    indoors(){
      if(this.$store.state.localLang == 'MM'){
        return [
          {'value': 1, 'text': 'အဲကြန္း'},
          {'value': 2, 'text': 'ေရခ်ိဳးကန္'},
          {'value': 3, 'text': 'ေရပူစက္'},
          {'value': 4, 'text': 'အဝတ္ေလွ်ာ္စက္'},
          {'value': 5, 'text': 'ေရခဲေသတၱာ'},
          {'value': 6, 'text': 'ျပန္လည္ျပဳျပင္ထားေသာ'},
          {'value': 7, 'text': 'လိုင္းဖုန္း'},
          {'value': 8, 'text': 'စကားေျပာစက္'},
          {'value': 9, 'text': 'ကြ်န္းသစ္ပါေကး'},
          {'value': 10, 'text': 'ျပင္ဆင္ထားေသာ မီးဖိုခန္း'},
          {'value': 11, 'text': 'Hall အမ်ိဳးအစား'},
          {'value': 12, 'text': 'CCTV'},
          {'value': 13, 'text': 'လံုျခံဳေရးဝန္ေဆာင္မႈမ်ား'},
          {'value': 14, 'text': 'ကိုယ္ပိုင္မီတာ'},
          {'value': 15, 'text': 'ကိုယ္ပိုင္ေမာ္တာ'},
          {'value': 16, 'text': 'ေျမေအာက္ေရကန္'},
          {'value': 17, 'text': 'အေပၚေရကန္'},
          {'value': 18, 'text': 'မီးစက္'},
          {'value': 19, 'text': 'အေျခခံ တည္ေဆာက္ျခင္း'},
          {'value': 20, 'text': '၂၄ နာရီ လံုျခံဳေရး ဝန္ထမ္းမ်ား'},
          {'value': 21, 'text': 'မီးအားျမွင့္စက္'}]
      }else {
        return [
          {'value': 1, 'text': 'Air Conditioning'},
          {'value': 2, 'text': 'Bathtub'},
          {'value': 3, 'text': 'Water Heater'},
          {'value': 4, 'text': 'Washing Machine'},
          {'value': 5, 'text': 'Refrigerator'},
          {'value': 6, 'text': 'Renovated'},
          {'value': 7, 'text': 'Phone line'},
          {'value': 8, 'text': 'Intercom'},
          {'value': 9, 'text': 'Teak Parquet'},
          {'value': 10, 'text': 'Tile Kitchen'},
          {'value': 11, 'text': 'Hall Type'},
          {'value': 12, 'text': 'CCTV'},
          {'value': 13, 'text': 'Security access control system'},
          {'value': 14, 'text': 'Own Meter'},
          {'value': 15, 'text': 'Own motor'},
          {'value': 16, 'text': 'Underground Tank'},
          {'value': 17, 'text': 'Overhead Tank'},
          {'value': 18, 'text': 'Generator'},
          {'value': 19, 'text': 'Pile Foundation'},
          {'value': 20, 'text': '24 Hour Security Staff'},
          {'value': 21, 'text': 'Transformer'}
        ]
      }
    },
    outdoors(){
      if(this.$store.state.localLang == 'MM'){
        return [
          {'value': 1, 'text': 'ကားပါကင္'},
          {'value': 2, 'text': 'ေရကူးကန္'},
          {'value': 3, 'text': 'အားကစားခန္းမ'},
          {'value': 4, 'text': 'ေရေႏြးေရခ်ိဳးခန္း'},
          {'value': 5, 'text': 'BBQ Area'},
          {'value': 6, 'text': 'ကေလးကစားကြင္း'},
          {'value': 7, 'text': 'ဓာတ္ေလွကား'}
        ]
      }else {
        return [
          {'value': 1, 'text': 'Car Park'},
          {'value': 2, 'text': 'Pool'},
          {'value': 3, 'text': 'Gym'},
          {'value': 4, 'text': 'Sauna'},
          {'value': 5, 'text': 'BBQ Area'},
          {'value': 6, 'text': 'Playground'},
          {'value': 7, 'text': 'Lift'}
        ]
      }
    },
  },
  methods: {
    getTownships (regionId) {
      let town = []
      this.townships = []
      this.ruleForm.townshipId = null

      if(this.$store.state.localLang == 'MM'){
        for (var t of mm_townships) {
          if (regionId === t.regionId) {
            town.push({value: t.value, text: t.text})
          }
        }
      }else {
        for (var t of townships) {
          if (regionId === t.regionId) {
            town.push({value: t.value, text: t.text})
          }
        }
      }
      this.townships = town
    },
    getSubType (type) {
      let subType = []
      this.propertySubType = []
      this.ruleForm.propertySubTypeId = null

      if(this.$store.state.localLang == 'MM'){
        for (var t of mm_propertySubType) {
          if (type === t.propertyTypeId) {
            subType.push({value: t.value, text: t.text})
          }
        }
      }else {
        for (var t of propertySubType) {
          if (type === t.propertyTypeId) {
            subType.push({value: t.value, text: t.text})
          }
        }
      }

      this.propertySubType = subType
    },
    // message alert 用于前端错误提示信息
    messageToastErr (msg) {
      this.$message({
        showClose: true,
        message: msg,
        duration: 1500,
        type: 'error'
      })
    },
    // 排序
    comparePhotoOrderNumber (property) {
      return function (obj1, obj2) {
        var value1 = obj1[property];
        var value2 = obj2[property];
        return value1 - value2;     // 升序
      }
    },
    // 开发商，提交表单——第一步，分步上传单张 unitandprice 图片
    submitDevForm (status, ruleForm) {
      let self = this
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 获取新增floor数据列表
          let addNewDevFloorInfos = this.$refs.unitsandprice.addNewDevFloorInfos
          let unitSandPrice = addNewDevFloorInfos
          // let floorImgBlobs = this.$refs.unitsandprice.floorImgBlobs
          self.fullscreenLoading = true
          if (unitSandPrice && (unitSandPrice.length > 0)) {
            let floorImgAll = unitSandPrice.map((e) => {
              if (e.imgBlob) {
                let formData = new FormData()
                formData.append('file', e.imgBlob)
                let config = {
                  'Content-Type': 'multipart/form-data'
                }
                return uploadFloorImgAjax(formData, config)
              }
            })
            this.$ajax.all(floorImgAll).then((resArr) => {
              resArr.forEach(function (res, i) {
                console.log(res)
                if (res) {
                  if (res.data) {
                    if (res.data.errorID === 0) {
                      let resData = res.data.object
                      unitSandPrice[i].photoUrl = resData
                      unitSandPrice[i].imgBlob = ''
                    } else if (res.data.errorID === 100004) {
                      self.fullscreenLoading = false
                      self.showToast(res.data.errorID)
                      self.$router.push('/login')
                    } else {
                      self.showToast(res.data.errorID)
                    }
                  }
                }
                // 判断请求所有是否都已返回完成
                if (i === (floorImgAll.length - 1)) {
                  self.sendFormMessag(status, unitSandPrice)
                  // self.sendFormMessage(status, unitSandPrice)
                }
              })
            }).catch((error) => {
              self.fullscreenLoading = false
              self.messageToastErr('error ,please try again leter')
            })
          } else {
            self.fullscreenLoading = true
            self.sendFormMessag(status, unitSandPrice)
            // self.sendFormMessage(status, unitSandPrice)
          }
        } else {
          self.fullscreenLoading = false
          self.messageToastErr('The form information is incomplete, please check out')
        }
      })
    },
    // 开发商，提交表单——第二步，提交开发商表单信息
    sendFormMessag (status, unitSandPrice) {
        let floorInfoObj = JSON.stringify(unitSandPrice)
        let googleMapInfo = this.$refs.googleMap
        // 有id -- 则提交编辑信息
        if (this.id) {
          let updatePhotoReqList = []
          let uploadPhotos = this.$refs.uploadPhotos.uploadPhotoList
          for (let i=0; i<uploadPhotos.length; i++){
            if (uploadPhotos[i].photoId){
              let potoReq = {
                orderNumber: i,
                photoId: uploadPhotos[i].photoId
              }
              updatePhotoReqList.push(potoReq)
            }
          }
          //编辑developer -- 表单信息
          let formAjaxData = {
            /* 新增编辑时添加的字段 start */
            developmentId: this.id,
            developmentUpdatePhotoReqList: JSON.stringify(updatePhotoReqList),
            /* 新增编辑时添加的字段 end */
            regionId: this.ruleForm.regionId,
            townshipId: this.ruleForm.townshipId,
            street: this.ruleForm.street,
            propertyTypeId: this.ruleForm.propertyTypeId,
            propertySubTypeId: this.ruleForm.propertySubTypeId,
            developmentName: this.ruleForm.developmentName,
            statusId: status,
            constructionStatus: this.ruleForm.constructionStatus,
            completionDate: this.ruleForm.completionDate,
            constructionStatusOtherDesc: this.ruleForm.constructionStatusOtherDesc,
            latitude: googleMapInfo.lat,
            longitude: googleMapInfo.lng,
            developmentsUnitsReqList: floorInfoObj,
            priceOptionDescription1: this.ruleForm.priceOptionDescription1,
            priceOptionDescription2: this.ruleForm.priceOptionDescription2,
            priceOptionDescription3: this.ruleForm.priceOptionDescription3,
            isInstallment: this.ruleForm.isInstallment,
            isBankLoan: this.ruleForm.isBankLoan,
            paymentTermsDescription: this.ruleForm.paymentTermsDescription,
            isGetHelp: this.ruleForm.isGetHelp,
            cashDownCommission: this.ruleForm.cashDownCommission,
            bankProcessCommission: this.ruleForm.bankProcessCommission,
            hirePurchasCommission: this.ruleForm.hirePurchasCommission,
            commissionDescription: this.ruleForm.commissionDescription,
            indoorFeatureList: this.ruleForm.indoorFeatureList,
            outdoorFeatureList: this.ruleForm.outdoorFeatureList,
            description: this.ruleForm.description,
            currencyId: this.ruleForm.currencyId
          }
          console.log(formAjaxData)
          let params = Qs.stringify(formAjaxData)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          updateDevelopmentInfo(params, config)
            .then((res) => {
              if (res) {
                if (res.data) {
                  if (res.data.errorID === 0) {
                    console.log('表单信息提交成功')
                    let developmentId = this.id
                    this.sendFormPhotos(developmentId)
                  } else if (res.data.errorID === 100004) {
                    this.$router.push('/login')
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  } else {
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error)
              this.fullscreenLoading = false
              this.messageToastErr('error,please try again later')
            })
        } else {
          //新增developer -- 表单信息
          let formAjaxData = {
            regionId: this.ruleForm.regionId,
            townshipId: this.ruleForm.townshipId,
            street: this.ruleForm.street,
            propertyTypeId: this.ruleForm.propertyTypeId,
            propertySubTypeId: this.ruleForm.propertySubTypeId,
            developmentName: this.ruleForm.developmentName,
            statusId: status,
            constructionStatus: this.ruleForm.constructionStatus,
            completionDate: this.ruleForm.completionDate,
            constructionStatusOtherDesc: this.ruleForm.constructionStatusOtherDesc,
            latitude: googleMapInfo.lat,
            longitude: googleMapInfo.lng,
            developmentsUnitsReqList: floorInfoObj,
            priceOptionDescription1: this.ruleForm.priceOptionDescription1,
            priceOptionDescription2: this.ruleForm.priceOptionDescription2,
            priceOptionDescription3: this.ruleForm.priceOptionDescription3,
            isInstallment: this.ruleForm.isInstallment,
            isBankLoan: this.ruleForm.isBankLoan,
            paymentTermsDescription: this.ruleForm.paymentTermsDescription,
            isGetHelp: this.ruleForm.isGetHelp,
            cashDownCommission: this.ruleForm.cashDownCommission,
            bankProcessCommission: this.ruleForm.bankProcessCommission,
            hirePurchasCommission: this.ruleForm.hirePurchasCommission,
            commissionDescription: this.ruleForm.commissionDescription,
            indoorFeatureList: this.ruleForm.indoorFeatureList,
            outdoorFeatureList: this.ruleForm.outdoorFeatureList,
            description: this.ruleForm.description,
            currencyId: this.ruleForm.currencyId
          }
          let params = Qs.stringify(formAjaxData)
          let config = {
            'Content-Type': 'multipart/form-data'
          }
          uploadDevelopmentInfo(params, config)
            .then((res) => {
              if (res) {
                if (res.data) {
                  if (res.data.errorID === 0) {
                    console.log('表单信息提交成功')
                    let developmentId = res.data.object
                    this.sendFormPhotos(developmentId)
                  } else if (res.data.errorID === 100004) {
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                    this.$router.push('/login')
                  } else {
                    this.fullscreenLoading = false
                    this.showToast(res.data.errorID)
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error)
              this.fullscreenLoading = false
              this.messageToastErr('error,please try again later')
            })
        }
    },
    //// 开发商，提交表单——第三步，提交开发商图片
    sendFormPhotos (id){
      let uploadPhotos = this.$refs.uploadPhotos.uploadPhotoList
      let formData = new FormData()
      //  是否有图片提交，有则提交图片，没有则显示表单提交成功信息
      let isToUpload = false
      for (let i=0; i<uploadPhotos.length; i++){
        if (uploadPhotos[i].photoBlob){
          formData.append('file_devPhotos_' + i, uploadPhotos[i].photoBlob)
          isToUpload = true
        }
      }
      if (isToUpload) {
        formData.append('developmentId', id)
        let config = {
          'Content-Type': 'multipart/form-data'
        }
        uploadDevelopmentFloorPhotos(formData, config).then((res) => {
          if (res) {
            if (res.data) {
              if (res.data.errorID === 0) {
                this.showToast(res.data.errorID)
                this.fullscreenLoading = false
                this.removeDevForm('ruleForm')
                setTimeout(() => {
                  this.$router.push({path: '/newdev', query: {id: id}})
                }, 1200)
              } else {
                this.fullscreenLoading = false
                this.messageToastErr('Upload picture failed, please try again leter')
              }
            }
          }
        })
          .catch((error) => {
            this.fullscreenLoading = false
            console.log(error)
            this.messageToastErr('error, please try again leter')
          })
      } else {
        this.showToast(0)
        this.fullscreenLoading = false
        this.removeDevForm('ruleForm')
        setTimeout(() => {
          this.$router.push({path: '/newdev', query: {id: id}})
        }, 1200)
      }
    },
    /* 注释：逻辑 -- 上传coverPhoto后，上传开发商表单信息，最后上传photos和floorPhotos*/
    // 开发商，提交表单——第二步，提交开发商主图
    // uploadCoverPhoto (status, unitSandPrice) {
    //   let self = this
    //   let uploadCoverPhoto = this.$refs.uploadPhotos.blobsObj
    //   if (uploadCoverPhoto.length > 0) {
    //     let formData = new FormData()
    //     formData.append('file', uploadCoverPhoto[0])
    //     let config = {
    //       'Content-Type': 'multipart/form-data'
    //     }
    //     uploadFloorImgAjax(formData, config).then((res) => {
    //       if (res.data) {
    //         if (res.data.errorID === 0) {
    //           let resData = res.data.object
    //           self.coverPhoto = resData
    //           self.sendFormMessage(status, unitSandPrice, resData)
    //         } else {
    //           self.showToast(res.data.errorID)
    //         }
    //       }
    //     }).catch((error) => {
    //       self.fullscreenLoading = false
    //       self.messageToastErr('error ,please try again leter')
    //     })
    //   }else{
    //     let resData = self.$refs.uploadPhotos.coverPhoto
    //     self.sendFormMessage(status, unitSandPrice, resData)
    //   }
    // },
    // 开发商，提交表单——第三步，提交开发商基本信息
    // sendFormMessage (status, floorInfo, coverUrl) {
    //   let self = this
    //   let coverPhoto = coverUrl || ''
    //   let floorInfoObj = JSON.stringify(floorInfo)
    //   let googleMapInfo = this.$refs.googleMap
    //   // 有id -- 則顯示編輯頁面
    //   if (this.id) {
    //     // let developmentUpdatePhotoReqList = this.$refs.uploadPhotos.developmentPhotoList
    //     let floorPlanUpdatePhotoReqList = this.$refs.uploadFloorPhotos.floorPlanPhotoList
    //     let formAjaxData = {
    //       /* 新增编辑时添加的字段 start */
    //       developmentId: this.id,
    //       // developmentUpdatePhotoReqList: JSON.stringify(developmentUpdatePhotoReqList),
    //       // floorPlanUpdatePhotoReqList: JSON.stringify(floorPlanUpdatePhotoReqList),
    //       developmentUpdatePhotoReqList: JSON.stringify(floorPlanUpdatePhotoReqList),
    //       /* 新增编辑时添加的字段 end */
    //       regionId: this.ruleForm.regionId,
    //       townshipId: this.ruleForm.townshipId,
    //       street: this.ruleForm.street,
    //       propertyTypeId: this.ruleForm.propertyTypeId,
    //       propertySubTypeId: this.ruleForm.propertySubTypeId,
    //       developmentName: this.ruleForm.developmentName,
    //       statusId: status,
    //       constructionStatus: this.ruleForm.constructionStatus,
    //       completionDate: this.ruleForm.completionDate,
    //       constructionStatusOtherDesc: this.ruleForm.constructionStatusOtherDesc,
    //       coverPhoto: coverPhoto,
    //       latitude: googleMapInfo.lat,
    //       longitude: googleMapInfo.lng,
    //       developmentsUnitsReqList: floorInfoObj,
    //       priceOptionDescription1: this.ruleForm.priceOptionDescription1,
    //       priceOptionDescription2: this.ruleForm.priceOptionDescription2,
    //       priceOptionDescription3: this.ruleForm.priceOptionDescription3,
    //       isInstallment: this.ruleForm.isInstallment,
    //       isBankLoan: this.ruleForm.isBankLoan,
    //       paymentTermsDescription: this.ruleForm.paymentTermsDescription,
    //       isGetHelp: this.ruleForm.isGetHelp,
    //       cashDownCommission: this.ruleForm.cashDownCommission,
    //       bankProcessCommission: this.ruleForm.bankProcessCommission,
    //       hirePurchasCommission: this.ruleForm.hirePurchasCommission,
    //       commissionDescription: this.ruleForm.commissionDescription,
    //       indoorFeatureList: this.ruleForm.indoorFeatureList,
    //       outdoorFeatureList: this.ruleForm.outdoorFeatureList,
    //       description: this.ruleForm.description,
    //       currencyId: this.ruleForm.currencyId
    //     }
    //     console.log(formAjaxData)
    //     let params = Qs.stringify(formAjaxData)
    //     let config = {
    //       'Content-Type': 'multipart/form-data'
    //     }
    //     updateDevelopmentInfo(params, config)
    //       .then((res) => {
    //         if (res) {
    //           if (res.data) {
    //             if (res.data.errorID === 0) {
    //               console.log('表单信息提交成功')
    //               let developmentId = this.id
    //               self.sendFormPhotos(developmentId)
    //             } else if (res.data.errorID === 100004) {
    //               self.$router.push('/login')
    //               self.fullscreenLoading = false
    //               self.showToast(res.data.errorID)
    //             } else {
    //               self.fullscreenLoading = false
    //               self.showToast(res.data.errorID)
    //             }
    //           }
    //         }
    //       })
    //       .catch(function (error) {
    //         console.log(error)
    //         self.fullscreenLoading = false
    //         self.messageToastErr('error,please try again later')
    //       })
    //   } else {
    //     let formAjaxData = {
    //       /* 新增编辑时添加的字段 start */
    //       /* 新增编辑时添加的字段 end */
    //       regionId: this.ruleForm.regionId,
    //       townshipId: this.ruleForm.townshipId,
    //       street: this.ruleForm.street,
    //       propertyTypeId: this.ruleForm.propertyTypeId,
    //       propertySubTypeId: this.ruleForm.propertySubTypeId,
    //       developmentName: this.ruleForm.developmentName,
    //       statusId: status,
    //       constructionStatus: this.ruleForm.constructionStatus,
    //       completionDate: this.ruleForm.completionDate,
    //       constructionStatusOtherDesc: this.ruleForm.constructionStatusOtherDesc,
    //       coverPhoto: coverPhoto,
    //       latitude: googleMapInfo.lat,
    //       longitude: googleMapInfo.lng,
    //       developmentsUnitsReqList: floorInfoObj,
    //       priceOptionDescription1: this.ruleForm.priceOptionDescription1,
    //       priceOptionDescription2: this.ruleForm.priceOptionDescription2,
    //       priceOptionDescription3: this.ruleForm.priceOptionDescription3,
    //       isInstallment: this.ruleForm.isInstallment,
    //       isBankLoan: this.ruleForm.isBankLoan,
    //       paymentTermsDescription: this.ruleForm.paymentTermsDescription,
    //       isGetHelp: this.ruleForm.isGetHelp,
    //       cashDownCommission: this.ruleForm.cashDownCommission,
    //       bankProcessCommission: this.ruleForm.bankProcessCommission,
    //       hirePurchasCommission: this.ruleForm.hirePurchasCommission,
    //       commissionDescription: this.ruleForm.commissionDescription,
    //       indoorFeatureList: this.ruleForm.indoorFeatureList,
    //       outdoorFeatureList: this.ruleForm.outdoorFeatureList,
    //       description: this.ruleForm.description,
    //       currencyId: this.ruleForm.currencyId
    //     }
    //     let params = Qs.stringify(formAjaxData)
    //     let config = {
    //       'Content-Type': 'multipart/form-data'
    //     }
    //     uploadDevelopmentInfo(params, config)
    //       .then(function (res) {
    //         if (res) {
    //           if (res.data) {
    //             if (res.data.errorID === 0) {
    //               console.log('表单信息提交成功')
    //               let developmentId = res.data.object
    //               self.sendFormPhotos(developmentId)
    //             } else if (res.data.errorID === 100004) {
    //               self.fullscreenLoading = false
    //               self.showToast(res.data.errorID)
    //               self.$router.push('/login')
    //             } else {
    //               self.fullscreenLoading = false
    //               self.showToast(res.data.errorID)
    //             }
    //           }
    //         }
    //       })
    //       .catch(function (error) {
    //         console.log(error)
    //         self.fullscreenLoading = false
    //         self.messageToastErr('error,please try again later')
    //       })
    //   }
    // },
    // 开发商，提交表单——第四步，提交开发商floor photos
    // sendFormPhotos (id) {
    //   let self = this
    //   // let uploadPhotos = this.$refs.uploadPhotos.blobsObj
    //   // if (uploadPhotos && uploadPhotos.length > 0) {
    //   //   let formData1 = new FormData()
    //   //   for (let i = 0; i < uploadPhotos.length; i++) {
    //   //     formData1.append('file_photos_' + i, uploadPhotos[i])
    //   //   }
    //   //   formData1.append('developmentId', id)
    //   //   let config1 = {
    //   //     'Content-Type': 'multipart/form-data'
    //   //   }
    //   //   var photosUpload1 = uploadDevelopmentPhotos(formData1, config1)
    //   // }
    //   let uploadFloorPhotos = this.$refs.uploadFloorPhotos.blobsObj
    //   // if (uploadFloorPhotos && uploadFloorPhotos.length > 0) {
    //   //   let formData2 = new FormData()
    //   //   for (let i = 0; i < uploadFloorPhotos.length; i++) {
    //   //     formData2.append('file_floorPhotos_' + i, uploadFloorPhotos[i])
    //   //   }
    //   //   formData2.append('developmentId', id)
    //   //   let config1 = {
    //   //     'Content-Type': 'multipart/form-data'
    //   //   }
    //   //   var photosUpload2 = uploadDevelopmentFloorPhotos(formData2, config1)
    //   // }
    //   if (uploadFloorPhotos.length > 0) {
    //     let formData2 = new FormData()
    //     for (let i = 0; i < uploadFloorPhotos.length; i++) {
    //       formData2.append('file_floorPhotos_' + i, uploadFloorPhotos[i])
    //     }
    //     formData2.append('developmentId', id)
    //     let config1 = {
    //       'Content-Type': 'multipart/form-data'
    //     }
    //     uploadDevelopmentFloorPhotos(formData2, config1).then((res) => {
    //         if (res) {
    //           if (res.data) {
    //             if (res.data.errorID === 0) {
    //               self.showToast(res.data.errorID)
    //               self.fullscreenLoading = false
    //               self.removeDevForm('ruleForm')
    //               setTimeout(function () {
    //                 self.$router.push({path: '/newdev', query: {id: id}})
    //               }, 1200)
    //             } else {
    //               self.fullscreenLoading = false
    //               self.showToast(res.data.errorID)
    //             }
    //           }
    //         }
    //     })
    //       .catch((error) => {
    //         self.fullscreenLoading = false
    //         console.log(error)
    //         self.messageToastErr('error, please try again leter')
    //       })
    //   } else {
    //     self.showToast(0) // 表单提交成功
    //     self.fullscreenLoading = false
    //     self.removeDevForm('ruleForm')
    //     setTimeout(function () {
    //       self.$router.push({path: '/newdev', query: {id: id}})
    //     }, 1200)
    //   }
    // },
    // 重置表单
    //清空表单
    removeDevForm (ruleForm) {
      this.$refs[ruleForm].resetFields()
      this.$refs.googleMap.clearSearch()
      this.$refs.uploadPhotos.removeAllImage()
      // this.$refs.uploadFloorPhotos.removeAllImage()
      this.$refs.unitsandprice.addNewDevFloorInfos = []
      this.$refs.unitsandprice.floorImgBlobs = []
    },
    // 新增units and price 楼层信息
    addNewFloor () {
      this.$refs.unitsandprice.dialogFormVisible = true
    },
    descriptionConter () {
      var txtVal = this.ruleForm.description.length
      this.remnant = txtVal
    },
    // 将获取的日期格式化
    getCompletion (date) {
      let oDate = new Date(date)
      let oYear = oDate.getFullYear()
      let oMonth = oDate.getMonth() + 1
      let oTime = oYear + '-' + this.getzf(oMonth)
      return oTime
    },
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    // 初始化 Dev 表单
    initDeveloperForm () {
      initDevelopment(this.id).then((res) => {
        if (res.data) {
          if (res.data.errorID === 0) {
            let developmentObj = res.data.object
            console.log(developmentObj)
            // New Development字段初始化
            this.ruleForm.regionId = developmentObj.regionId
            this.getTownships(developmentObj.regionId)
            this.ruleForm.townshipId = developmentObj.townshipId
            this.ruleForm.street = developmentObj.street
            this.ruleForm.propertyTypeId = developmentObj.propertyTypeId
            this.getSubType(developmentObj.propertyTypeId)
            this.ruleForm.propertySubTypeId = developmentObj.propertySubTypeId
            this.ruleForm.developmentName = developmentObj.developmentName
            if (developmentObj.completionDate) {
              let cDate = this.getCompletion(developmentObj.completionDate)
              this.ruleForm.completionDate = cDate
            } else {
              this.ruleForm.completionDate = null
            }
            this.ruleForm.constructionStatus = developmentObj.constructionStatus
            this.ruleForm.constructionStatusOtherDesc = developmentObj.constructionStatusOtherDesc
            // Google Map 初始化
            if (developmentObj.latitude) {
              let latlng = {'lat': developmentObj.latitude, 'lng': developmentObj.longitude}
              this.$refs.googleMap.initMap(latlng)
            }
            // Photos 初始化
            // this.coverPhoto = developmentObj.coverPhoto
            // // this.developmentPhotoList = developmentObj.developmentPhotoList
            // // this.floorPlanPhotoList = developmentObj.floorPlanPhotoList
            // this.floorPlanPhotoList = developmentObj.developmentPhotoList
            if (developmentObj.developmentPhotoList.length > 0){
              // 根据后台返回的photoList中的orderNumber对图片进行排序，并将排序结果传至子组件uploadPhotos的uploadPhotoList
              let sortObj = developmentObj.developmentPhotoList.sort(this.comparePhotoOrderNumber("orderNumber"));
              this.$refs.uploadPhotos.uploadPhotoList = sortObj
            }
            // Units and Price 初始化
            this.developmentsUnitsList = developmentObj.developmentsUnitsList
            for (let i = 0; i < this.developmentsUnitsList.length; i++) {
              this.developmentsUnitsList[i].photoUrlView = this.developmentsUnitsList[i].photoUrl
              for (var f of floors) {
                if (this.developmentsUnitsList[i].floor === f.value) {
                  this.developmentsUnitsList[i].floorName = f.text
                  break
                }
              }
            }
            this.$refs.unitsandprice.addNewDevFloorInfos = this.developmentsUnitsList
            // console.log(developmentObj.developmentsUnitsList)
            // 继续development 表单初始化
            this.ruleForm.priceOptionDescription1 = developmentObj.priceOptionDescription1
            this.ruleForm.priceOptionDescription2 = developmentObj.priceOptionDescription2
            this.ruleForm.priceOptionDescription3 = developmentObj.priceOptionDescription3
            this.ruleForm.isInstallment = developmentObj.isInstallment
            this.ruleForm.isBankLoan = developmentObj.isBankLoan
            this.ruleForm.paymentTermsDescription = developmentObj.paymentTermsDescription
            this.ruleForm.isGetHelp = developmentObj.isGetHelp
            this.ruleForm.cashDownCommission = developmentObj.cashDownCommission
            this.ruleForm.bankProcessCommission = developmentObj.bankProcessCommission
            this.ruleForm.hirePurchasCommission = developmentObj.hirePurchasCommission
            this.ruleForm.commissionDescription = developmentObj.commissionDescription
            this.ruleForm.indoorFeatureList = developmentObj.indoorFeatureList
            this.ruleForm.outdoorFeatureList = developmentObj.outdoorFeatureList
            this.ruleForm.description = developmentObj.description
            this.ruleForm.currencyId = developmentObj.currencyId
          }
        }
      }).catch((error) => {
        if (error.response) {
          // 请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内
          console.log(error.response.data)
          console.log(error.response.status)
          console.log(error.response.header)
        } else {
          // 一些错误是在设置请求的时候触发
          console.log('Error', error.message)
        }
        console.log(error.config)
        this.messageToastErr('error,please refresh the page later')
      })
    }
  },
  components: {
    googleMap,
    uploadmoreimages,
    unitsAndPrice
    // uploadimages,
    // uploadImagesFloor,
  },
  mounted () {
    /* 页面初始化完成之前子组件未加载完google map 就调用initMap中的googleObj会报错
     * 现将google map 加载放在父组件上面
     */
    this.fullscreenLoading = true
    /* Google Map Init */
    window.mapsObj = ''
    GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
    GoogleMapsLoader.VERSION = '3.14'
    GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
    GoogleMapsLoader.load((google) => {
      let autocomplete = new google.maps.places.Autocomplete((document.getElementsByName('googleMapInput')[0]), {types: ['geocode']})
      let geocoder = new google.maps.Geocoder()
      let googleObj = google
      let mapsObj = {autocomplete: autocomplete, geocoder: geocoder, googleObj: googleObj}
      window.mapsObj = mapsObj
      this.id = this.$route.query.id || ''
      if (this.id) {
        this.initDeveloperForm()
        this.fullscreenLoading = false
      } else {
        this.fullscreenLoading = false
      }
    })
  }
}
</script>

<style>
.devlopment{
  /* width:80%;
  padding:30px;
  */
  margin:0 auto;
  background:#fff;
}
.devlopment h3{
  line-height: 240%;
  border-bottom:1px solid #eee;
}
.devlopment .container-box{
  padding: 0 30px;
}
.devlopment .el-form-item__label{
  text-align: left;
  display: inline-block;
}
.devlopment .label-style .el-form-item__label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right:0;
  width: 100%;
}
.label-vertical .el-form-item__label{
  width: 100%;
}
.devlopment .el-select{
  display: block;
}
.devlopment .el-input__suffix{
  top:50%;
  height: 50%;
}
.devlopment .el-date-editor.el-input{
  width: 100%
}
.devlopment .el-date-editor.el-input  .el-input__suffix,.devlopment .currency  .el-input__suffix{
  top:0;
  height:100%;
}
.description-conter{
  position:absolute;
  right: 0;
  top: 0;
  color: #5a5e66;
  font-size:13px;
}
.price-option{
  margin-top:20px;
  text-align:left;
}
.price-option .el-form-item{
  margin-bottom: 0;
}
.features-check .el-checkbox{
  width:33%;
}
.features-check .el-checkbox+.el-checkbox{
  margin-left: 0;
}
.page-title{
  padding:20px 40px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 20px;
}
.container-padding{
  padding:0 40px;
}
.devlopment .container-box .photo-title{
  display:none;
}
/*.devlopment h3{*/
  /*color: #f60;*/
/*}*/
</style>
